<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="childVisible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="500px"
  >
    <el-form
      ref="childForm"
      :model="childForm"
      :rules="rules"
    >
      <el-form-item
        label="一级品类："
        label-width="140px"
        prop="parentid"
      >
        <el-select
          v-model="childForm.parentid"
          placeholder="请选择"
          disabled
        >
          <el-option
            v-for="(item, index) in firstLevel"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="品类名称："
        label-width="140px"
        prop="name"
      >
        <el-input
          v-model="childForm.name"
          autocomplete="off"
        />
      </el-form-item>
      <!-- <el-form-item
        label="上传封面："
        label-width="140px"
        prop="image"
      >
        <crop-upload
          show-type="photo"
          :init-val="childForm.image"
          file-size="100K"
          wrapper-width="95px"
          wrapper-height="95px"
          @setVal="(val) => setUrl(val)"
        />
      </el-form-item> -->
      <!-- <el-form-item>
        <div style="color:red;margin-left:120px">缩略图尺寸要求为 宽：95px，高：95px</div>
      </el-form-item> -->
      <!-- <el-form-item
        label="图片链接："
        label-width="140px"
        prop="link"
      >
        <el-input
          v-model="childForm.link"
          autocomplete="off"
        ></el-input>
      </el-form-item> -->
      <el-form-item
        label="状态:"
        label-width="130px"
        prop="enabled"
      >
        <el-radio
          v-model="childForm.enabled"
          :label="1"
        >显示</el-radio>
        <el-radio
          v-model="childForm.enabled"
          :label="0"
        >隐藏</el-radio>
      </el-form-item>
      <el-form-item
        label="排序："
        label-width="140px"
        prop="displayorder"
      >
        <el-input
          v-model="childForm.displayorder"
          autocomplete="off"
        />
      </el-form-item>
      <!-- <el-form-item
        label="租赁类目："
        label-width="140px"
        prop="rent_category"
      >
        <el-select
          v-model="childForm.rent_category"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in rentList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item
        label="租赁宝类目："
        label-width="140px"
        prop="zlb_class"
      >
        <el-select
          v-model="childForm.zlb_class"
          placeholder="请选择"
        >
          <el-option
            v-for="item in zlbList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item
        label="保险类目："
        label-width="140px"
        prop="insurance_category"
      >
        <el-select
          v-model="childForm.insurance_category"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in insureList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item> -->
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('childForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String
    },
    childVisible: {
      type: Boolean,
      default: false
    },
    childForm: {
      type: Object,
      default: () => ({})
    },
    firstLevel: {
      type: Array,
      default: () => []
    },
    rentList: {
      type: Array,
      default: () => []
    },
    insureList: {
      type: Array,
      default: () => []
    },
    zlbList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value && value !== 0) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        parentid: [
          { required: true, message: '请选择一级品类名称', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入二级品类名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
        // link: [{ required: true, message: '请输入链接', trigger: 'blur' }],
        // image: [{ required: true, message: '请上传封面', trigger: 'change' }],
        displayorder: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        rent_category: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        insurance_category: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        zlb_class: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  watch: {
    childVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.childForm.clearValidate()
        })
      }
    }
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    setUrl(val) {
      this.$emit('setUrl', val)
    },
    submitForm(formName) {
      var strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var reg = new RegExp(strRegex);
          // if (this.childForm.link) {
          //   if (!reg.test(this.childForm.link)) {
          //     this.$message.error("请确保图片链接正确");
          //     return false;
          //   } else {
          //     this.$emit("submitForm", true);
          //   }
          // }
          this.$emit('submitForm', true)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
